<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>首页</title>
        <link href="favicon.ico" rel="shortcut icon">
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/main.css">
        <link rel="stylesheet" href="css/index/index.css">
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/index/media.css">
        <link rel="stylesheet" href="css/index/animation.css">
    </head>
    <body>
        
        <div class="container">
            <header>
                <nav>
                    <a href="index.html" class="logo"><img src="img/common/logo.png" alt="logo图"></a>
                    <div class="box">
                       <a href="index.html"><img src="img/common/logoTxt.png" alt="logo图文"></a>
                       <div class="menu flex">
                           <p class="menuBtn">
                               <i></i>
                               <i class="hidden"></i>
                               <i></i>
                           </p>
                            <ul class="flex" style="display: none;">
                                <img class="wavePic" src="img/common/blueWave.png" alt="蓝波浪图片">
                                <li><i>•</i><a class='letterWaveBox' href="index.html">首页</a></li>
                                <li><i>•</i><a class='letterWaveBox' href="about.html">产品介绍</a></li>
                                <li><i>•</i><a class='letterWaveBox' href="saleLocation.html">销售点</a></li>
                                <li><i>•</i><a class='letterWaveBox' href="news.html">新闻</a></li>
                                <li><i>•</i><a class='letterWaveBox' href="join.html">俱乐部</a></li>
                                <p class="line"><span></span><span></span></p>
                            </ul>      
                       </div>                                                                                                                                                                           
                    </div>
                </nav>
            </header>
            <main class="fluid ready">
                <div class='palace'>
                    <div class="mainHead">
                        <div class="title">   
                            <div class="txt">
                                <h1>
                                    天生的能量<br>
                                    chuanshi<br>
                                    Drinks
                                </h1>
                            </div>
                            <div class="bg ready"></div>
                        </div>
                        
                        <div class="ready overHalf content">
                            <img class='delay-1 wavePic' src="img/common/wave.png" alt="波浪图片">
                            <p class="delay-2">
                                穿石科技秉承"绳锯木断，水滴石穿"的创业理念，致力做软件外包行业优质，贴心的服务提供商。愿携手用户打造适合自身的互联网品牌文化。穿石科技主营业务：网站建设，小程序，智慧店铺搭建，APP制作等软件开发业务。穿石营销理念：结合公司新零售业务，取消业务环节，降级开发业务的制作成本，实现客户利润最大化。
                            </p>
                            <a class='rollBox delay-3' href="about.html">
                                <div class="roll flex">
                                    <p>发现穿石科技 · 发现穿石科技 · 发现穿石科技 · 发现穿石科技 ·</p>
                                    <p>发现穿石科技 · 发现穿石科技 · 发现穿石科技 · 发现穿石科技 ·</p>
                                    <p>发现穿石科技 · 发现穿石科技 · 发现穿石科技 · 发现穿石科技 ·</p>
                                </div>
                            </a>
                            <p class="line delay-4">
                                <span></span>
                                <span></span>
                            </p>
                            <div class="float">
                                <img class="scrollItem left_1 w-25pct" data-bottom-top="transform:translate(0,0)" data-top-bottom="transform:translate(0,-50%)" src="img/index/sm_leave.png" alt="左一树叶">
                                <img class="scrollItem left_2 w-50pct" data-bottom-top="transform:translate(0,0)" data-top-bottom="transform:translate(0,-75%)" src="img/index/lg_leave.png" alt="左二树叶">
                                <img class="scrollItem right w-50pct" data-bottom-top="transform:translate(0,0)" data-top-bottom="transform:translate(0,-50%)" src="img/index/right_leave.png" alt="右树叶">
                            </div>
                        </div>
                    </div>
                    <div class="goods">
                        <div class="item red overHalf ready">
                            <div class="content">
                                <img class="delay-1 wavePic" src="img/common/wave.png" alt="波浪图片">
                                <h1 class="delay-2">低糖款</h1>
                                <p class="delay-3">穿石低糖款饮品仅含5％的糖，不含假糖（阿斯巴甜，甜叶菊等）。</p>
                                <p class="line delay-4">
                                    <span></span>
                                    <span></span>
                                </p>
                            </div>
                            <div class="box">
                                <div class="rotate">
                                    <p>
                                        <img src="img/index/rollBg1.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg1.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg1.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg1.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg1.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg1.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg1.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg1.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="item blue overHalf ready">
                            <div class="content">
                                <img class="delay-1 wavePic" src="img/common/wave.png" alt="波浪图片">
                                <h1 class="delay-2">天然咖啡因风味</h1>
                                <p class="delay-3">得益于YerbaMaté叶，穿石饮品所含咖啡因的含量是简单意式浓缩咖啡的两倍。它具有刺激性，使其在南美非常受欢迎。</p>
                                <p class="line delay-4">
                                    <span></span>
                                    <span></span>
                                </p>
                            </div>
                            <div class="box">
                                <div class="rotate">
                                    <p>
                                        <img src="img/index/rollBg2.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg2.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg2.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg2.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg2.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg2.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg2.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg2.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="item green overHalf ready">
                            <div class="content">
                                <img class="delay-1 wavePic" src="img/common/wave.png" alt="波浪图片">
                                <h1 class="delay-2">保健款</h1>
                                <p class="delay-3">该植物具有排毒和抗氧化作用，常用于新一代保健产品线和凉茶。</p>
                                <p class="line delay-4">
                                    <span></span>
                                    <span></span>
                                </p>
                            </div>
                            <div class="box">
                                <div class="rotate">
                                    <p>
                                        <img src="img/index/rollBg3.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg3.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg3.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg3.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg3.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg3.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg3.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                    <p>
                                        <img src="img/index/rollBg3.png" alt="旋转背景">
                                        <img src="img/index/rollBeer.png" class="beer" alt="旋转啤酒瓶">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="moveLoop">
                        <ul>
                            <li class="active">
                                <div class="box">
                                    <div class="info">
                                        <div class="title flex flex-align-items">
                                            <img src="img/index/vertical_beer.png" alt="酒瓶图">
                                            <h1>石榴石</h1>
                                        </div>
                                        <p>穿石俱乐部是石榴，红浆果和樱桃汁的俱乐部伴侣基地</p>
                                    </div>
                                </div>
                                <div class="moveBottle">
                                    <div class="roll">
                                        <p>
                                            <span><img src="img/index/left_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/left_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/left_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/left_beer.png" alt="酒瓶图"></span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box">
                                    <div class="info">
                                        <div class="title flex flex-align-items">
                                            <img src="img/index/vertical_beer.png" alt="酒瓶图">
                                            <h1>石榴石</h1>
                                        </div>
                                        <p>穿石俱乐部是石榴，红浆果和樱桃汁的俱乐部伴侣基地</p>
                                    </div>
                                </div>
                                <div class="moveBottle">
                                    <div class="roll right">
                                        <p>
                                            <span><img src="img/index/right_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/right_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/right_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/right_beer.png" alt="酒瓶图"></span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box">
                                    <div class="info">
                                        <div class="title flex flex-align-items">
                                            <img src="img/index/vertical_beer.png" alt="酒瓶图">
                                            <h1>石榴石</h1>
                                        </div>
                                        <p>穿石俱乐部是石榴，红浆果和樱桃汁的俱乐部伴侣基地</p>
                                    </div>
                                </div>
                                <div class="moveBottle">
                                    <div class="roll">
                                        <p>
                                            <span><img src="img/index/left_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/left_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/left_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/left_beer.png" alt="酒瓶图"></span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box">
                                    <div class="info">
                                        <div class="title flex flex-align-items">
                                            <img src="img/index/vertical_beer.png" alt="酒瓶图">
                                            <h1>石榴石</h1>
                                         </div>
                                        <p>穿石俱乐部是石榴，红浆果和樱桃汁的俱乐部伴侣基地</p>
                                    </div>
                                </div>
                                <div class="moveBottle">
                                    <div class="roll right">
                                        <p>
                                            <span><img src="img/index/right_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/right_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/right_beer.png" alt="酒瓶图"></span>
                                            <span><img src="img/index/right_beer.png" alt="酒瓶图"></span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="news cursorBox ready">
                        <div class="followCursor"></div>
                        <div class="bottomBg"></div>
                        <div class="swiper-container newsSwiper">
                            <div class="swiper-wrapper">
                                <a class="swiper-slide" href="newsInfo.html">
                                    <div class="pic">
                                        <div class="box">
                                            <div class="rollBox">
                                                <div class="flex roll">
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                </div>
                                            </div>
                                            <img src="img/news/news1.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="info">
                                        <h1>夜协议节： 当聚会是集体运动时。 </h1>
                                        <p>14 • 10 • 19</p>
                                    </div>
                                    
                                </a>
                                <a class="swiper-slide" href="newsInfo.html">
                                    <div class="pic">
                                        <div class="box">
                                            <div class="rollBox">
                                                <div class="flex roll">
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                </div>
                                            </div>
                                            <img src="img/news/news1.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="info">
                                        <h1>夜协议节： 当聚会是集体运动时。</h1>
                                        <p>14 • 10 • 19</p>
                                    </div>
                                    
                                </a>
                                <a class="swiper-slide" href="newsInfo.html">
                                    <div class="pic">
                                        <div class="box">
                                            <div class="rollBox">
                                                <div class="flex roll">
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                </div>
                                            </div>
                                            <img src="img/news/news1.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="info">
                                        <h1>夜协议节： 当聚会是集体运动时。</h1>
                                        <p>14 • 10 • 19</p>
                                    </div>
                                    
                                </a>
                                <a class="swiper-slide" href="newsInfo.html">
                                    <div class="pic">
                                        <div class="box">
                                            <div class="rollBox">
                                                <div class="flex roll">
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                </div>
                                            </div>
                                            <img src="img/news/news1.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="info">
                                        <h1>夜协议节： 当聚会是集体运动时。</h1>
                                        <p>14 • 10 • 19</p>
                                    </div>
                                    
                                </a>
                                <a class="swiper-slide" href="newsInfo.html">
                                    <div class="pic">
                                        <div class="box">
                                            <div class="rollBox">
                                                <div class="flex roll">
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                    <p> · 阅读 ·  · 阅读 ·  · 阅读 ·  · 阅读 · </p>
                                                </div>
                                            </div>
                                            <img src="img/news/news1.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="info">
                                        <h1>夜协议节： 当聚会是集体运动时。</h1>
                                        <p>14 • 10 • 19</p>
                                    </div>
                                    
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <footer class="fluid">
                <div class="palace">
                    <a href="about.html" class="box">
                        <div class="contn flex flex-align-items">
                            <div class="bg"></div>
                            <div class="details">
                                <div class="rollBox">
                                    <div class="roll flex">
                                        <p>跟随 · 跟随 · 跟随 · 跟随 · 跟随· </p>
                                        <p>跟随 · 跟随 · 跟随 · 跟随 · 跟随· </p>
                                        <p>跟随 · 跟随 · 跟随 · 跟随 · 跟随· </p>
                                        <p>跟随 · 跟随 · 跟随 · 跟随 · 跟随· </p>
                                        <p>跟随 · 跟随 · 跟随 · 跟随 · 跟随· </p>
                                        <p>跟随 · 跟随 · 跟随 · 跟随 · 跟随· </p>
                                        <p>跟随 · 跟随 · 跟随 · 跟随 · 跟随· </p>
                                    </div>
                                </div>
                                <div class="screen">
                                    <div class="roll flex flex-align-items">
                                        <h1>产品介绍  产品介绍  产品介绍  产品介绍  产品介绍</h1>
                                        <h1>产品介绍  产品介绍  产品介绍  产品介绍  产品介绍</h1>
                                        <h1>产品介绍  产品介绍  产品介绍  产品介绍  产品介绍</h1>
                                        <h1>产品介绍  产品介绍  产品介绍  产品介绍  产品介绍</h1>
                                        <h1>产品介绍  产品介绍  产品介绍  产品介绍  产品介绍</h1>
                                        <h1>产品介绍  产品介绍  产品介绍  产品介绍  产品介绍</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <nav>
                        <ul>
                            <li><a href="index.html">首页</a></li><i></i>
                            <li><a href="about.html">产品介绍</a></li><i></i>
                            <li><a href="saleLocation.html">销售点</a></li><i></i>
                            <li><a href="news.html">新闻</a></li><i></i>
                            <li><a href="join.html">俱乐部</a></li><i></i>
                            <li><a href="problems.html">常见问题</a></li><i></i>
                            <li><a href="contactUs.html">联系我们</a></li>
                        </ul>
                        <p>
                            <span>Copyright © 宁波穿石网络科技有限公司 All rights reserved</span>
                            <span>技术支持：穿石网路</span>
                        </p>
                    </nav>
                </div>
            </footer>
            <div class="animateBottle big beginning"><div class="rotateSelf scrollItem" data-bottom-top="transform:translate(0,0%)" data-top-bottom="transform:translate(0,-25%)"></div></div>
            <div class="animateBottle small beginning"><div class="rotateSelf scrollItem" data-bottom-top="transform:translate(0,0%)" data-top-bottom="transform:translate(0,-30%)"></div></div>
            <div class="shave"></div>
        </div>
        
        <div class="bottomBg">
            <div class="box"><div class="son"><p class="sawtooth"></p><p class="colorBlock"></p></div></div>
            <div class="box"><div class="son"><p class="sawtooth"></p><p class="colorBlock"></p></div></div>
            <div class="box"><div class="son"><p class="sawtooth"></p><p class="colorBlock"></p></div></div>
            <div class="box"><div class="son"><p class="sawtooth"></p><p class="colorBlock"></p></div></div>
            <div class="box"><div class="son"><p class="sawtooth"></p><p class="colorBlock"></p></div></div>
        </div>
        <svg width="0" height="0" style="position: absolute;" 
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <filter id="water">
            <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
            <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
            <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite">
            </feColorMatrix>
            <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="10" in="SourceGraphic" in2="noise2" />
        </filter>
        </svg>
        <script src="js/common/jquery.js"></script>
        <script src="js/common/swiper.js"></script>
        <script>
                var flag_lianxing= JSON.parse(sessionStorage.getItem('flag_lianxing'));
                if (typeof jQuery == 'undefined') {
                    console.log(" 未加载")
                    if(flag_lianxing){
                        console.log("自动刷新一次未加载")
                    }else{
                        sessionStorage.setItem('flag_lianxing', JSON.stringify("1"));
                        window.location.reload();
                    }
            
                } else {
                    console.log(" 已加载")
                }
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/common/main.js"></script>
        <script src="js/index/index.js"></script>
        <script src="js/common/media.js"></script>
        <script src="js/index/animation.js"></script>
        
    </body>
</html>